<template>
  <div>
    <!--内联样式绑定-->
    <div v-bind:style="state.style">测试</div>
    <div v-bind:style="[styleA, styleB]"></div>
    <!--绑定value-->
    <input type="text" v-bind:value="state.value">
    <!--绑定value 简写形式-->
    <input type="text" :value="state.value">
    <!--绑定src-->
    <img style="width:50px" v-bind:src="state.src" alt="">
    <!--内联字符串拼接-->
    <img :src="'/assets/img' + index + '.png'">
    <!--class绑定-->
    <div :class="{test:isTrue}"></div>
    <div :calss="[classA, classB]"></div>
    <div :class="[classA, {classB:true, classC:false}]"></div>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      style: {
        color: 'red',
        fontSize:'40px' //注意样式以对象形式编写，需要写成驼峰形式
      },
      value:'测试',
      src:'https:/s.yezgea02.com/1634796191388/logo%20(1).png'
    })
    return { state }
  }
}
</script>